<template>
  <div class="mainContainer">
    <div class="title">
      <span>编辑权限</span>
      <Icon
        type="md-close"
        style="float: right; cursor: pointer"
        @click="close"
      />
    </div>
    <Divider class="fengeLine" />
    <div class="authType" style="float: right; margin: 10px 10px">
      <Button
        @click="changeTableState_public"
        :type="btnPublic ? 'primary' : 'default'"
        >完全公开</Button
      >
      <Button
        @click="changeTableState_t"
        :type="btnHalf ? 'primary' : 'default'"
        >半公开</Button
      >
      <Button
        @click="changeTableState_private"
        :type="btnPrivate ? 'primary' : 'default'"
        >完全私密</Button
      >
    </div>
    <div class="mainContent">
      <div class="left">
        <Input
          search
          clearable
          placeholder="搜索用户"
          v-model="name"
          @on-search="queryUser"
          @on-clear="clearSearch"
        />
        <h4 style="margin: 18px 0">用户信息</h4>
        <Table
          :columns="columns"
          :data="userList"
          border
          :disabled-hover="!tableState"
        >
          <template slot-scope="{ row }" slot="action">
            <img
              src="../../assets/fwsq/添加用户.png"
              @click="tableState ? addUser(row) : ''"
              style="cursor: pointer"
            />
          </template>
        </Table>
        <div class="pageContainer" style="float: right; margin-top: 25px">
          <Page
            :total="userListTotal"
            simple
            @on-change="pageParams"
            :disabled="isPageDisabled"
          ></Page>
        </div>
      </div>
      <div class="right">
        <h3>允许的用户</h3>
        <div class="userContent">
          <div
            v-for="(user, index) in authUser"
            :key="index"
            style="height: 37px; padding: 10px 12px"
          >
            <span v-if="user.xingming">{{
              user.username + "(" + user.xingming + ")"
            }}</span>
            <span v-else-if="user.username">{{ user.username }}</span>
            <span v-else>{{ user }}</span>
            <img
              src="../../assets/fwsq/删除用户.png"
              style="float: right; cursor: pointer"
              @click="delUserAuth(index)"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="button">
      <Button @click="submit">完成</Button>
    </div>
  </div>
</template>
<script>
export default {
  name: "saItem",
  data() {
    return {
      columns: [
        {
          title: "用户名",
          key: "username",
        },
        {
          title: "操作",
          slot: "action",
        },
      ],
      authUser: [],
      userList: [],
      name: "",
      isPageDisabled: false,
      userListTotal: 0,
      page: 1,
      size: 6,
      serviceAuthState: true,
      tableState: true,
      isAccess: false,
      serviceId: [],
      btnPublic: false,
      btnPrivate: false,
      btnHalf: false,
    };
  },
  props: ["serviceMsg"],
  mounted() {
    this.queryUserList().then((res) => {
      this.chooseButtonState(this.serviceMsg);
    });

    this.getServiceId(this.serviceMsg);
  },
  methods: {
    getServiceId(input) {
      input.forEach((item) => {
        this.serviceId.push(item.id);
      });
    },
    changeTableState_public() {
      this.tableState = false;
      this.authUser.length = 0;
      this.isAccess = true;

      this.btnPublic = true;
      this.btnPrivate = false;
      this.btnHalf = false;
    },
    changeTableState_private() {
      this.tableState = false;
      this.authUser.length = 0;
      this.isAccess = false;

      this.btnPrivate = true;
      this.btnHalf = false;
      this.btnPublic = false;
    },
    changeTableState_t() {
      this.tableState = true;
      this.isAccess = false;

      this.btnHalf = true;
      this.btnPublic = false;
      this.btnPrivate = false;
    },
    chooseButtonState(input) {
      if (input.length == 1) {
        if (input[0].isAccess) {
          this.tableState = false;
          this.btnPublic = true;
          this.btnPrivate = false;
          this.btnHalf = false;
        } else {
          if (input[0].userAccess.length > 0) {
            this.tableState = true;
            this.btnHalf = true;
            this.btnPublic = false;
            this.btnPrivate = false;
            input[0].userAccess.splice(
              input[0].userAccess.indexOf("fgmi_mnr"),
              1
            );
            for (let i = 0; i < this.userList.length; i++) {
              for (let j = 0; j < input[0].userAccess.length; j++) {
                if (this.userList[i].username == input[0].userAccess[j]) {
                  this.authUser.push(this.userList[i]);
                  break;
                }
              }
            }
          } else {
            this.tableState = false;
            this.btnPrivate = true;
            this.btnHalf = false;
            this.btnPublic = false;
          }
        }
      } else {
        for (let i = 0; i < input.length - 1; i++) {
          // console.log(input[i]);
          if (
            input[i].isAccess != input[i + 1].isAccess &&
            input[i].userAccess.length > 0
          ) {
            this.tableState = true;
            break;
          } else {
            this.tableState = false;
          }
        }
      }
    },
    queryUserList() {
      return this.axios
        .get("/user", {
          page: this.page,
          size: this.size,
        })
        .then((res) => {
          if (res.data.code === 200) {
            console.log(res);
            let index = -1;
            for (let i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].username == "fgmi_mnr") {
                index = i;
                break;
              }
            }
            if (index != -1) {
              res.data.data.splice(index, 1);
              this.userList = res.data.data;
              this.userListTotal = res.data.total - 1;
            } else {
              this.userList = res.data.data;
              this.userListTotal = res.data.total;
            }
          } else {
            this.$Message.info("当前没有用户");
          }
        });
    },
    queryUser() {
      this.axios.get("/user/" + this.name).then((res) => {
        if (res.data.code === 200) {
          this.userList = [res.data.data];
        } else {
          this.$Message.info("当前查找用户不存在！");
        }
      });
      this.isPageDisabled = true;
    },
    clearSearch() {
      this.queryUserList();
      this.isPageDisabled = false;
    },
    pageParams(page) {
      this.page = page;
      this.queryUserList();
    },
    addUser(user) {
      function findDouble(user, authUser) {
        let result = false;
        for (let i = 0; i < authUser.length; i++) {
          if (authUser[i].id == user.id) {
            result = true;
            break;
          }
        }
        return result;
      }
      let temp = findDouble(user, this.authUser);

      if (temp) {
        this.$Message.info("该用户已添加!!!");
      } else {
        this.authUser.push(user);
      }
    },
    close() {
      this.$emit("showSA", false);
    },
    submit() {
      let result = [];
      this.authUser.forEach((item) => {
        result.push(item.id);
      });
      this.axios
        .post("/serviceAuth", {
          serviceIds: this.serviceId,
          isAccessible: this.isAccess,
          userIds: result,
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.$Message.info("服务授权，分配完毕");
            this.$emit("showSA", false);
          } else {
            this.$Message.info("服务授权失败！");
          }
        });
    },
    delUserAuth(index) {
      this.authUser.splice(index, 1);
    },
  },
};
</script>
<style scoped>
.mainContainer {
  position: fixed;
  width: 820px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 1);
  z-index: 999;
}
.title {
  height: 40px;
  padding: 10px;
}
.fengeLine {
  margin: 0;
}
.mainContent {
  height: 500px;
  padding: 10px;
}
.left {
  width: 450px;
  height: 480px;
  padding: 8px 38px;
  float: left;
  border-radius: 8px;
}
.right {
  width: 350px;
  height: 449px;
  padding: 8px;
  float: right;
}
.button {
  height: 60px;
  padding: 10px;
}
.button button {
  float: right;
}
.userContent {
  margin-top: 20px;
  margin-right: 38px;
  height: 390px;
  border: 1px solid rgba(210, 210, 210, 1);
  border-radius: 4px;
  overflow-y: auto;
}
</style>
